<script setup>
import { ref } from 'vue';


const user = ref({
	name : "张三",
	age : 28,
	job : "前端工程师",
	hobby : ["编程","游泳","阅读"],
	isMember : false,
})


const cancel = () =>{
	user.value.isMember = false;
}

const upgrade = () =>{
	user.value.isMember = true;
}

</script>

<template>
	<div>
		<h1 v-if="user.isMember" class="exalted" >尊贵会员</h1>
		<h1 v-else>普通会员</h1>
		
		<p>
			<strong>姓名:</strong>{{user.name}}
		</p>
		<p>
			<strong>年龄:</strong>{{user.age}}
		</p>
		<p>
			<strong>职业:</strong>{{user.job}}
		</p>
		<p>
			<strong>爱好:</strong>
			<li v-for="item in user.hobby">{{item}}</li>
		</p>
		
		<button v-if="user.isMember" v-on:click="cancel" style = "background-color: orange;">取消会员</button>
		<button v-else v-on:click="upgrade" style="background-color: green;">升级会员</button>
	</div>
	

</template>

<style scoped>
	
	.exalted {
		background-color: goldenrod;
	}
	
	div {
		border-radius: 10px;
		width:300px;
		height: 400px;
		padding: 20px 30px;
		border: solid 1px red;
		text-align: center;
		position: absolute; 
		top: 50%; 
		left: 50%; 
		transform: translate(-50%, -50%);
	}
	
	
</style>
